<template>
  <Navbar title="邀请码" />
  <div class="content bg-communit">
    <div class="panel">
      <div class="code">
        <img src="../../assets/imgs/QRCode.png" />
      </div>
      <div class="part">
        <h3>当前地址</h3>
        <div class="con">
          <div class="l"> {{ address }} </div>
          <div :aria-label="address" :data-clipboard-text="address" class="btn-copy copy_btn" @click="copyText">
            <img src="../../assets/imgs/copy.png" />
          </div>
        </div>
      </div>
      <div class="part">
        <h3>邀请链接</h3>
        <div class="con">
          <div class="l"> {{ invitationLink }} </div>
          <div :aria-label="invitationLink" :data-clipboard-text="invitationLink" class="btn-copy copy_btn" @click="copyText">
            <img src="../../assets/imgs/copy.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import Navbar from '../../components/Navbar/index.vue'
import { showToast } from 'vant';
import Clipboard from 'clipboard'

// 地址
const address = location.href
// 邀请链接
const invitationLink = location.origin + location.pathname

const copyText = () => {
  var clipBoard = new Clipboard('.copy_btn')
   clipBoard.on('success', function() {
       clipBoard.destroy()
       clipBoard = new Clipboard('#btn')
       showToast('复制成功')
   })
   clipBoard.on('error', function() {
      showToast('复制失败，请手动复制')
   })
}
</script>

<style scoped lang='scss'>
.content {
  padding-top: 2.875rem;
  min-height: 100vh;
  overflow: hidden;
}
.panel {
  border-radius: 0.55rem;
  margin: 2.875rem 1.25rem;
  padding: 1.5625rem 0.9375rem;
  background-color: #fff;
  background: linear-gradient(rgba(71, 71, 107, 0.8) 0%, rgba(50, 55, 75, 0.8) 33.81%, rgba(71, 71, 107, 0.8) 71.33%);
  .code {
    width: 10.625rem;
    height: 10.625rem;
    border: 1px solid #4ddae7;
    background-color: #fff;
    margin: 0 auto 0.46875rem;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: 10px;
    }
  }
  .part {
    border-radius: 0.625rem;
    background: rgb(20, 22, 30);
    border: 1px solid rgb(68, 78, 104);
    margin-bottom: 0.9375rem;
    padding: 0.9375rem 1.5625rem;
    &:last-child {
      margin-bottom: 0;
    }
    h3 {
      font-size: 0.875rem;
      text-align: center;
      margin-bottom: 0.625rem;
    }
    .con {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .l {
      max-width: 85%;
      font-size: 0.75rem;
      line-height: 1.125rem;
      font-weight: 700;
      color: rgb(134, 138, 174);
      word-break: break-all;
    }
    .btn-copy {
      margin-left: 0.625rem;
      img {
        width: 0.93752rem;
        height: 0.93752rem;
      }
    }
  }
}
</style>